<template>
	<view class="sort">
		<u-navbar :is-back="false">
			<view class="slot-wrap">
				<view class="search-wrap">
					<u-search class="search" v-model="search" height="56" :show-action="false" :action-style="{color: '#fff'}" @search="searchEvent"></u-search>
				</view>
			</view>
		</u-navbar>
		
		<view class="leftBox" :style="{ top: Number(navbarHeight) + statusBarHeight + 'px' }">
			<view class="item" :class="item.id == one_cate_id ? 'active' : ''" @click="oneCateActiveEvent(index)" v-for="(item, index) in one_cate_list" :key="index" >{{item.title}}</view>
		</view>
		<view class="rightBox">
			<view class="tabs" :style="{ top: Number(navbarHeight) + statusBarHeight + 'px' }">
				<u-tabs :list="two_cate_list" name="title" :current="tabsCurrent" active-color="#22ac38" font-size="26" @change="tabsChange"></u-tabs>
			</view>
			<view class="goodsList">
				<view class="item flex_space_b" v-for="(item, index) in goods_list" :key="index" @click="goDetails(index)">
					<view class="imageBox">
						<u-image width="200rpx" height="200rpx" border-radius="12" :src="item.goods_main_img"></u-image>
						<!-- <view class="mask">最高补贴:￥53.92</view> -->
						<!-- <view class="rect"></view>
						<view class="desc">热拍</view> -->
						<view class="mask flex_conter_c" v-if="item.store_num < 1">
							<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="goodsInfoBox flex1">
						<view class="title u-line-2">{{item.goods_title}}</view>
						<view class="data">
							<view class="flex_space_b">
								<view class="price">￥<text>{{item.sales_price}}</text></view>
								<view class="group">已参与0/3</view>
							</view>
							<view class="flex_space_b">
								<view class="subsidy mTop1">未买中立赚￥{{item.max_income}}</view>
								<view class="car mTop1">
									<text>马上成团</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	let systemInfo = uni.getSystemInfoSync();
	
	export default {
		data() {
			return {
				one_cate_id:0,
				two_cate_id:0,
				one_cate_list:[],
				two_cate_list:[],
				goods_list:[],
				tabsCurrent: 0,
				p:1,
				is_loading:false,
				is_more:true,
				search: '',
				statusBarHeight: systemInfo.statusBarHeight
			}
		},
		onLoad() {
			this.loadData(true);
		},
		onReachBottom() {
			if(!this.is_loading){
			  if(!this.is_more){
				util.toast("没有更多数据了");
				return false;
			  }
			  this.p = parseInt(this.p) + 1;
			  this.moreData();
			}
		},
		methods: {
			loadData: function(is_loading){
				// 加载数据
				var that = this;
				let data = {
					'one_cate_id':this.one_cate_id,
					'two_cate_id':this.two_cate_id
				};
				util.requestPost("api.php/home/goodsCateGoods", data, function(res) {
					that.one_cate_list = res.data.one_cate_list;
					that.two_cate_list = res.data.two_cate_list;
					that.goods_list = res.data.goods_list;
				},is_loading);
			},
			moreData: function(){
				// 加载数据
				var that = this;
				let data = {
					'one_cate_id':this.one_cate_id,
					'two_cate_id':this.two_cate_id,
					'p':this.p
				};
				this.is_loading = true;
				util.requestPost("api.php/home/searchGoodsList", data, function(res) {
					let is_more = false;
					if(res.data.goods_list.length >=15){
					  is_more = true;
					}
					that.goods_list = that.goods_list.concat(res.data.goods_list);
					that.is_loading = false;
					that.is_more = is_more;
				});
			},
			oneCateActiveEvent (index) {
				// 选择一级分类
				this.one_cate_id = this.one_cate_list[index].id;
				this.tabsCurrent = 0;
				this.two_cate_id = 0;
				this.p = 1;
				this.is_more = true;
				this.goods_list = [];
				this.loadData(true);
			},
			tabsChange (index) {
				// 选择二级分类
				this.tabsCurrent = index
				this.two_cate_id = this.two_cate_list[index].id;
				this.p = 1;
				this.is_more = true;
				this.goods_list = [];
				this.loadData(true);
			},
			goDetails (index) {
				// 商品详情
				uni.navigateTo({
					url: '/pages/index/goodsDetails?goods_id='+this.goods_list[index].goods_id
				})
			},
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			searchEvent () {
				// 搜索
				uni.navigateTo({
					url: '/pages/index/search?search='+this.search
				})
			},
		},
		computed: {
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return this.height ? this.height : 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return this.height ? this.height : height;
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}
.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}
.search-wrap .search {
	flex: 1;
}

.sort {
	/*  #ifdef  H5  */
	padding-bottom: 50px;
	/*  #endif  */
}
.leftBox {
	width: 180rpx;
	position: fixed;
	top: 68px;
	left: 0;
	/*  #ifndef   H5  */
	bottom: 0;
	/*  #endif  */
	
	/*  #ifdef  H5  */
	bottom: 50px;
	/*  #endif  */
	background-color: var(--bgColor);
	overflow: scroll;
}
.leftBox .item {
	padding: 26rpx 20rpx;
	text-align: center;
	font-size: 28rpx;
	color: #333333;
}
.leftBox .item.active {
	font-size: 30rpx;
	font-weight: 600;
	background-color: #FFFFFF;
	color: var(--primaryColor);
}
.rightBox {
	margin-left: 180rpx;
}
.rightBox .tabs {
	border-bottom: 1rpx solid #EEEEEE;
	position: fixed;
	top: 68px;
	left: 180rpx;
	right: 0;
	z-index: 2;
}

.goodsList {
	padding: 92rpx 20rpx 0;
	.item {
		border-radius: 12rpx;
		overflow: hidden;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
		.imageBox {
			position: relative;
			overflow: hidden;
			border-radius: 12rpx;
			.mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.5);
				.image {
					width: 160rpx;
				}
			}
		}
		.goodsInfoBox {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			box-sizing: border-box;
			height: 200rpx;
			margin-left: 20rpx;
			padding: 10rpx 0;
		}
		.title {
			color: #333333;
			font-size: 28rpx;
		}
		.data {
			.price {
				color: var(--primaryColor);
				font-size: 26rpx;
				margin-right: 20rpx;
				text {
					font-size: 36rpx;
				}
			}
			.original {
				color: #666;
				font-size: 24rpx;
				text-decoration: line-through;
			}
			.group {
				display: inline-block;
				font-size: 24rpx;
				color: var(--primaryColor);
				border-radius: 8rpx;
			}
			.subsidy {
				display: inline-block;
				color: #FFFFFF;
				font-size: 22rpx;
				padding: 4rpx 12rpx;
				border-radius: 40rpx;
				background: #f37b1d;
			}
			.car {
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 12rpx;
				border-radius: 40rpx;
				background: #ff4b06;
			}
		}
	}
}
</style>
